//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：myTerms.js
// 创建时间：2017年05月25日
// 创建人员：Lemo
// 功能说明：myTerms page
//################################
'use strict';

import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    WebView,
    Dimensions,
    TouchableOpacity,
    InteractionManager
} from 'react-native';

import {
    UIConstants,
    Colors,
    FontSizes
} from '../../common';

import Images from '../../images';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;

class MyTerms extends Component {
    constructor(props) {
        super(props);

        this.onBackPress = this.onBackPressFunc.bind(this);
    }

    onBackPressFunc() {
        const {navigatorRoot} = this.props;
        InteractionManager.runAfterInteractions(() => {
            navigatorRoot.pop();
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.headers}>
                    <TouchableOpacity style={styles.headerback} onPress={this.onBackPress}>
                        <Image source={Images.Back} style={styles.headerbackicon} resizeMode={Image.resizeMode.contain} />
                        <Text style={styles.headerbacktext}>{UIConstants.my.back}</Text>
                    </TouchableOpacity>
                    <Text style={styles.headertext} numberOfLines={1}>
                       {'会员条款'}
                    </Text>
                    <TouchableOpacity style={styles.headerback} disabled={true}>
                        <Image source={Images.Back} style={[styles.headerbackicon, {opacity: 0}]} resizeMode={Image.resizeMode.contain} />
                        <Text style={[styles.headerbacktext,{opacity: 0}]}>{UIConstants.my.back}</Text>
                    </TouchableOpacity>
                </View>

                <WebView 
                    style={{width:WINDOW_WIDTH,height:WINDOW_HEIGHT-60}}
                    source= {{uri:'http://www.gezigame.com/Home/Index/agreement',method:'GET'}} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.appBackground,
    },
    headers: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomWidth: 0.5,
        borderBottomColor: Colors.gray,
        backgroundColor: Colors.appHeaderBackground,
    },
    headertext: {
        flex: 1,
        fontSize: FontSizes.soiHeader,
        color: Colors.appHeaderText,
        textAlign: 'center',
        alignSelf: 'center',
        marginBottom: -12,
    },
    headerback: {
        flexDirection: 'row',
        marginBottom: -12,
        alignItems: 'center',
        padding: 8,
    },
    headerbackicon: {
        width: 20,
        height: 20,
    },
    headerbacktext: {
        fontSize: 17,
        color: Colors.appHeaderText,
    }
});

export default MyTerms;